<!DOCTYPE html>
<html>
  <head>
    <title>iOS and Js</title>
    <style type="text/css">
      * {
        font-size: 40px;
      }
    </style>
  </head>
  
  <body>
    
    <div style="margin-top: 100px">
      <h1>Test how to use objective-c call js</h1><br/>
      <div><input type="button" value="call js alert" onclick="callJsAlert()"></div>
      <br/>
      <div><input type="button" value="Call js confirm" onclick="callJsConfirm()"></div><br/>
    </div>
    <br/>
    <div>
      <div><input type="button" value="Call Js prompt " onclick="callJsInput()"></div><br/>
      <div>Click me here: <a href="http://www.baidu.com">Jump to Baidu</a></div>
    </div>
    
    <br/>
    <div id="SwiftDiv">
      <span id="jsParamFuncSpan" style="color: red; font-size: 50px;"></span>
    </div>
    
    <script type="text/javascript">
      function callJsAlert() {
        alert('Objective-C call js to show alert');
        
        window.webkit.messageHandlers.AppModel.postMessage({body: 'call js alert in js'});
      }
    
    function callJsConfirm() {
      if (confirm('confirm', 'Objective-C call js to show confirm')) {
        document.getElementById('jsParamFuncSpan').innerHTML
        = 'true';
      } else {
        document.getElementById('jsParamFuncSpan').innerHTML
        = 'false';
      }
      
      // AppModel是我们所注入的对象
      window.webkit.messageHandlers.AppModel.postMessage({body: 'call js confirm in js'});
    }
    
    function callJsInput() {
      var response = prompt('Hello', 'Please input your name:');
      document.getElementById('jsParamFuncSpan').innerHTML = response;
      
       // AppModel是我们所注入的对象
      window.webkit.messageHandlers.AppModel.postMessage({body: response});
    }
      </script>
  </body>
</html>